<template>
  <div class="actors">
    <div class="actors-title">
      <span class="actors-title-text">演职人员</span>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(actor, index) in actors" :key="index" class="swiper-slide">
          <div class="lazy-img-wrap"><img :src="actor.avatarAddress" alt="演员照片"></div>
          <span class="actor-name">{{ actor.name }}</span>
          <span class="actor-role">{{ actor.role }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/swiper-bundle.min.css'
import Swiper from 'swiper'

export default {
  name: 'Actors',
  props: {
    actors: Array,
  },
  updated() {
    new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 20,
      slidesOffsetAfter: 20,
      freeMode: true,
    })
  }
}
</script>

<style lang="scss" scoped>
.actors {
  background-color: #ffffff;
  margin-top: 2.67vw;

  .actors-title {
    font-size: 16px;
    text-align: left;
    color: #191a1b;
    padding: 4vw;

    .actors-title-text {
      height: 6vw;
      line-height: 6vw;
    }
  }

  .swiper-container {
    margin-left: 4vw;

    .swiper-slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        position: absolute;
        width: 22.67vw;
        top: -20%;

      }

      .actor-name {
        margin-top: 2.67vw;
        font-size: 12px;
        color: #191a1b;
      }

      .actor-role {
        font-size: 12px;
        color: #797d82;
        padding-bottom: 2.67vw;
      }
    }
  }
}

.lazy-img-wrap {
  position: relative;
  width: 22.67vw;
  height: 22.67vw;
  overflow: hidden;
}
</style>
